<template>
	<div v-loading="loading">
		<div class="content-top">
			<span>报告类型</span>
			<el-radio-group v-model="rate" @change="change()">
				<el-radio :label=info>用户信息</el-radio>
				<el-radio :label=y>运营商报告</el-radio>
				<el-radio :label=j>京东报告</el-radio>
				<el-radio :label=ali>支付宝报告</el-radio>
				<el-radio :label=t>淘宝</el-radio>
			</el-radio-group>
		</div>
		<div id="ifron" v-html="html" v-if='isJson' style="margin-bottom: 40px;">
		</div>
		<div v-else style="margin-bottom: 40px;">
			<div v-show='isTb'>
				<p class="psName">淘宝账号信息</p>
				<el-table :data="tableData1" style="width: 100%" max-height="250">
					<el-table-column label="淘宝帐户名" prop="login_name">
					</el-table-column>
					<el-table-column label="淘宝买家级别" prop="buyer_credit">
					</el-table-column>
					<el-table-column label="淘宝会员名" prop="account_name">
					</el-table-column>
					<el-table-column label="登录邮箱" prop="email">
					</el-table-column>
					<el-table-column label="绑定手机" prop="binding_phone">
					</el-table-column>
					<el-table-column label="是否已完成身份认证" prop="authentication">
					</el-table-column>
					<el-table-column label="绑定的微博帐号" prop="binding_weibo_account">
					</el-table-column>
					<el-table-column label="真实姓名" prop="name">
					</el-table-column>
					<el-table-column label="详细地址" prop="address">
					</el-table-column>
					<el-table-column label="天猫账户" prop="tianmao_account">
					</el-table-column>
				</el-table>
				<p class="psName">淘宝订单信息</p>
				<el-table :data="tableData2" style="width: 100%" max-height="250">
					<el-table-column label="订单id" prop="order_id">
					</el-table-column>
					<el-table-column label="订单状态" prop="status">
					</el-table-column>
					<el-table-column label="订单金额" prop="actual_fee">
					</el-table-column>
					<el-table-column label="是否手机订单" prop="phone_order">
					</el-table-column>
					<el-table-column label="成交时间" prop="transaction_time">
					</el-table-column>
					<el-table-column label="付款时间" prop="payment_time">
					</el-table-column>
					<el-table-column label="确认时间" prop="confirmation_time">
					</el-table-column>
					<el-table-column label="收货人姓名" prop="receiver_name">
					</el-table-column>
					<el-table-column label="收货人手机号" prop="receiver_telephone">
					</el-table-column>
					<el-table-column label="收货地址" prop="products.product_name">
					</el-table-column>
				</el-table>
				<p class="psName">淘宝收货地址</p>
				<el-table :data="tableData3" style="width: 100%" max-height="250">
					<el-table-column label="收货人姓名" prop="receiver_name">
					</el-table-column>
					<el-table-column label="所在地区" prop="area">
					</el-table-column>
					<el-table-column label="详细地址" prop="address">
					</el-table-column>
					<el-table-column label="邮编" prop="zip_code">
					</el-table-column>
					<el-table-column label="电话/手机" prop="phone">
					</el-table-column>
					<el-table-column label="是否默认地址" prop="is_default_address	">
					</el-table-column>
				</el-table>
				<p class="psName">淘宝关联的支付宝信息</p>
				<el-table :data="tableData4" style="width: 100%" max-height="250">
					<el-table-column label="支付宝余额" prop="balance">
					</el-table-column>
					<el-table-column label="余额宝历史累计收益" prop="total_profit">
					</el-table-column>
					<el-table-column label="余额宝账户余额" prop="total_quotient">
					</el-table-column>
					<el-table-column label="花呗可用额度" prop="huabei_credit_amount">
					</el-table-column>
					<el-table-column label="花呗总额度" prop="huabei_total_credit_amount">
					</el-table-column>
					<el-table-column label="支付宝账户" prop="zhifubao_account">
					</el-table-column>
					<el-table-column label="绑定的手机号" prop="binding_phone">
					</el-table-column>
					<el-table-column label="支付宝账户类型" prop="account_type">
					</el-table-column>
					<el-table-column label="支付宝实名认证的姓名" prop="verified_name">
					</el-table-column>
					<el-table-column label="支付宝实名认证的身份证号" prop="verified_id_card">
					</el-table-column>
				</el-table>
			</div>
			<div v-show='isAli'>
				<p class="psName">支付宝账号信息</p>
				<el-table :data="alipayInfo" style="width: 100%" max-height="250">
					<el-table-column label="支付宝帐户名" prop="login_name" width="120">
					</el-table-column>
					<el-table-column label="真实姓名" prop="real_name" width="120">
					</el-table-column>
					<el-table-column label="身份证" prop="id_card" width="180">
					</el-table-column>
					<el-table-column label="绑定的邮箱" prop="email" width="120">
					</el-table-column>
					<el-table-column label="绑定的手机号" prop="phone" width="120">
					</el-table-column>
					<el-table-column label="淘宝帐户名" prop="taobao_name" width="120">
					</el-table-column>
					<el-table-column label="注册日期" prop="register_date">
					</el-table-column>
					<el-table-column label="是否实名认证" prop="is_real_name" width="120">
					</el-table-column>
					<el-table-column label="是否会员保障" prop="is_protected" width="120">
					</el-table-column>
					<el-table-column label="是否绑定手机" prop="is_phone" width="120">
					</el-table-column>
					<el-table-column label="安全等级" prop="secret_level">
					</el-table-column>
					<el-table-column label="账户余额" prop="balance">
					</el-table-column>
					<el-table-column label="余额宝总收入" prop="income" width="120">
					</el-table-column>
					<el-table-column label="是否身份证认证" prop="is_idcard" width="120">
					</el-table-column>
					<el-table-column label="余额宝总金额" prop="amount" width="120">
					</el-table-column>
					<el-table-column label="花呗总额度" prop="total_amount" width="120">
					</el-table-column>
					<el-table-column label="花呗可用额度" prop="available_amount" width="120">
					</el-table-column>
					<el-table-column label="花呗下期需还" prop="need_to_pay_next_month" width="120">
					</el-table-column>
				</el-table>
				<p class="psName">支付宝借呗信息</p>
				<el-table :data="alipayJiebei" style="width: 100%" max-height="250">
					<el-table-column label="借呗总额度" prop="credit_amount">
					</el-table-column>
					<el-table-column label="借呗可借额度" prop="loanable_amount">
					</el-table-column>
					<el-table-column label="原始日利率" prop="origin_rate">
					</el-table-column>
					<el-table-column label="当前日利率" prop="now_rate">
					</el-table-column>
					<el-table-column label="是否逾期" prop="is_overdue">
					</el-table-column>
					<el-table-column label="未还期数" prop="unclear_loan_count">
					</el-table-column>
					<el-table-column label="借呗是否关闭" prop="is_closed">
					</el-table-column>
				</el-table>
				<p class="psName">支付宝交易记录</p>
				<el-table :data="alipayList" style="width: 100%" max-height="250">
					<el-table-column label="支付时间" prop="pay_time">
					</el-table-column>
					<el-table-column label="交易名称" prop="trade_type">
					</el-table-column>
					<el-table-column label="交易对方账户" prop="trade_no_type">
					</el-table-column>
					<el-table-column label="交易号" prop="trade_no">
					</el-table-column>
					<el-table-column label="接收人" prop="receiver_name">
					</el-table-column>
					<el-table-column label="交易金额" prop="amount	">
					</el-table-column>
					<el-table-column label="交易状态" prop="status">
					</el-table-column>
					<el-table-column label="支付宝账户名" prop="alipay_name">
					</el-table-column>
					<el-table-column label="支付宝交易分类" prop="trade_classification	">
					</el-table-column>
				</el-table>
				<p class="psName">银行卡信息</p>
				<el-table :data="bankcard" style="width: 100%" max-height="250">
					<el-table-column label="支付宝帐户名" prop="alipay_name">
					</el-table-column>
					<el-table-column label="银行卡后4位" prop="card_last_num">
					</el-table-column>
					<el-table-column label="快捷支付开通状态" prop="open_status">
					</el-table-column>
					<el-table-column label="银行名称" prop="bank_name">
					</el-table-column>
					<el-table-column label="银行卡类型" prop="card_type">
					</el-table-column>
					<el-table-column label="银行预留手机号" prop="mobile">
					</el-table-column>
					<el-table-column label="快捷支付开通日期" prop="active_date">
					</el-table-column>
					<el-table-column label="银行卡持卡人姓名" prop="show_user_name">
					</el-table-column>
				</el-table>
				<p class="psName">缴费记录</p>
				<el-table :data="aliChargeAccount" style="width: 100%" max-height="250">
					<el-table-column label="支付宝帐户名" prop="login_name">
					</el-table-column>
					<el-table-column label="缴费项目" prop="charge_item">
					</el-table-column>
					<el-table-column label="地区" prop="area">
					</el-table-column>
					<el-table-column label="收费单位" prop="charge_unit">
					</el-table-column>
					<el-table-column label="户名" prop="charge_account">
					</el-table-column>
					<el-table-column label="缴费号码" prop="charge_number">
					</el-table-column>
					<el-table-column label="缴费提醒" prop="charge_reminder">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 用户信息 -->
		<div class="info"  v-show = 'isInfo'>
			<el-form label-width="130px" :model="formLabelAlign">
					<div class="clearfix thumbnail">
						<div class='divleft'><img :src="Host+sczSfz" @click="lookBig('手持身份证照',sczSfz)"/></div>
						<div class='divrig'>
							<el-form-item label="姓名:" label-width="60px">
							    <el-input v-model="formLabelAlign.name" disabled></el-input>
							</el-form-item>
							<el-form-item label="性别:" label-width="60px">
						    	<el-radio v-model="formLabelAlign.sex" label="男" >男</el-radio>
								<el-radio v-model="formLabelAlign.sex" label="女" >女</el-radio>
						    </el-form-item>
						    <el-form-item label="芝麻分:" label-width="60px">
							    <el-input v-model="formLabelAlign.zmf" type='number' disabled></el-input>
							</el-form-item>
							<el-form-item label="微信号:" label-width="60px">
							    <el-input v-model="formLabelAlign.wx" disabled></el-input>
							  </el-form-item>
						</div>
					</div>
				  <div class="sfz-box clearfix">
				  	<img :src="Host+zmzSfz" @click="lookBig('身份证正面照',zmzSfz)"/>
				  	<img :src="Host+fmzSfz" @click="lookBig('身份证反面照',fmzSfz)"/>
				  </div>
				  <el-form-item label="身份证号:">
				    <el-input v-model="formLabelAlign.card" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="年龄:">
				    <el-input v-model="formLabelAlign.age" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="电话:">
				    <el-input v-model="formLabelAlign.tel" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="电话实名年限:">
				    <el-input v-model="formLabelAlign.years" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="居住地址:">
				    <el-input v-model="formLabelAlign.add" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人:">
				    <el-input v-model="formLabelAlign.jj1" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人关系:">
				    <el-input v-model="formLabelAlign.jj2" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人电话:">
				    <el-input v-model="formLabelAlign.bz" type='number' disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人1:">
				    <el-input v-model="formLabelAlign.jj11" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人关系1:">
				    <el-input v-model="formLabelAlign.jj21" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="紧急联系人电话1:">
				    <el-input v-model="formLabelAlign.bz1" type='number' disabled></el-input>
				  </el-form-item>
				</el-form>
		</div>
		<el-dialog
		  :title=tips
		  :visible.sync="dialogVisible"
		  width="50%"
		  :before-close="handleClose" class='bigDialog'>
		  <img :src="Host+bigSrc" class="bigImg"/>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import apis from "../../../api/prouserApi";
export default {
  name: "creditInfos",
  data() {
    return {
      bigSrc:'',//大图路径
      tips:'',
      dialogVisible:false,//大图弹框
      Host: apis.host,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      aliChargeAccount: [], //缴费记录
      alipayInfo: [], //支付宝信息
      bankcard: [], //银行卡信息
      alipayJiebei: [], //借呗
      alipayList: [], //支付宝交易记录
      loading: false,
      y: "mobile",
      info: "info", //用户信息
      j: "jd",
      ali: "alipay_crawl",
      t: "taobao_crawl",
      rate: "info",
      html: "",
      type: "html",
      isJson: true,
      jsons: "",
      isAli: false,
      isTb: false,
      isInfo: false,
      formLabelAlign: {
        name: "",
        sex: "男",
        money: "",
        card: "",
        age: "",
        tel: "",
        years: "",
        city: "",
        add: "",
        qq: "",
        wx: "",
        zmf: "",
        jj1: "",
        jj2: "",
        bz: "",
        jj11: "",
        jj21: "",
        bz1: ""
      },
      zmzSfz: "", //正面照
      fmzSfz: "", //反面照
      sczSfz: "" //手持照
    };
  },
  created() {
    this.change();
  },
  updated: function() {},
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    change() {
      if (
        this.rate != this.t &&
        this.rate != this.ali &&
        this.rate != this.info
      ) {
        this.isInfo = false;
        this.type = "html";
        this.isJson = true;
        this.loading = true;
        this.$axios
          .post(apis.getreportpro, {
            memberID: this.$route.params.id,
            certifyType: this.rate,
            dateType: this.type
          })
          .then(res => {
            if (res.data.isOK) {
              if (res.data.data.html) {
                this.html = res.data.data.html;
                this.loading = false;
              } else {
                this.loading = false;
                this.$message.error("没有数据");
              }
            } else {
              this.html = "";
              if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
                this.$router.push({
                  path: "/"
                });
              } else {
                this.loading = false;
                this.$message.error(res.data.msg);
              }
            }
          });
      } else {
        if (this.rate == this.ali) {
          this.isInfo = false;
          this.isTb = false;
          this.isAli = true;
          this.type = "json";
          this.isJson = false;
          this.loading = true;
          this.$axios
            .post(apis.getreportpro, {
              memberID: this.$route.params.id,
              certifyType: this.rate,
              dateType: this.type
            })
            .then(res => {
              if (res.data.isOK) {
                this.jsons = res.data.data.json;
                if (res.data.data.json) {
                  this.jsons = JSON.parse(this.jsons);
                } else {
                  this.$message.error("数据有误");
                  this.loading = false;
                  return false;
                }
                if (this.jsons.wd_api_alipay_getData_response) {
                  //支付宝信息
                  this.alipayInfo = this.jsons.wd_api_alipay_getData_response.data.data_list[0].alipay_info;
                  //借呗
                  this.alipayJiebei = this.jsons.wd_api_alipay_getData_response.data.data_list[0].alipay_jiebei;
                  //交易记录
                  this.alipayList = this.jsons.wd_api_alipay_getData_response.data.data_list[0].alipay_list;
                  //银行卡信息
                  this.bankcard = this.jsons.wd_api_alipay_getData_response.data.data_list[0].bankcard;
                  //缴费记录
                  this.aliChargeAccount = this.jsons.wd_api_alipay_getData_response.data.data_list[0].alipay_charge_account;
                  this.loading = false;
                } else {
                  this.$message.error("数据有误");
                  this.loading = false;
                }
              } else {
                if (
                  res.data.msg == "Token无效" ||
                  res.data.msg == "Token缺失"
                ) {
                  this.$router.push({
                    path: "/"
                  });
                } else {
                  this.loading = false;
                  this.html = "";
                  this.$message.error(res.data.msg);
                }
              }
            });
        } else if (this.rate == this.t) {
          this.isInfo = false;
          this.isTb = true;
          this.isAli = false;
          this.type = "json";
          this.isJson = false;
          this.loading = true;
          this.$axios
            .post(apis.getreportpro, {
              memberID: this.$route.params.id,
              certifyType: this.rate,
              dateType: this.type
            })
            .then(res => {
              if (res.data.isOK) {
                this.jsons = res.data.data.json;
                if (res.data.data.json) {
                  this.jsons = JSON.parse(this.jsons);
                } else {
                  this.$message.error("数据有误");
                  this.loading = false;
                  return false;
                }
                if (this.jsons.wd_api_taobao_getData_response) {
                  this.tableData1[0] = this.jsons.wd_api_taobao_getData_response.data.data_list[0].tb_user;
                  this.tableData2 = this.jsons.wd_api_taobao_getData_response.data.data_list[0].tb_orders;
                  this.tableData3 = this.jsons.wd_api_taobao_getData_response.data.data_list[0].tb_deliver_addrs;
                  this.tableData4[0] = this.jsons.wd_api_taobao_getData_response.data.data_list[0].tb_zhifubao_binding;
                  this.loading = false;
                } else {
                  this.$message.error("数据有误");
                  this.loading = false;
                }
              } else {
                if (
                  res.data.msg == "Token无效" ||
                  res.data.msg == "Token缺失"
                ) {
                  this.$router.push({
                    path: "/"
                  });
                } else {
                  this.loading = false;
                  this.html = "";
                  this.$message.error(res.data.msg);
                }
              }
            });
        } else {
          this.isJson = false;
          this.isAli = false;
          this.isTb = false;
          this.isInfo = true;
          this.getmodel(this.$route.params.id);
        }
      }
    },
    handleClose(){
    	this.dialogVisible = false
    },
    //查看大图
    lookBig(title,src){
    	this.tips = title
    	this.bigSrc = src
    	this.dialogVisible = true
    },
    //获取客户模型
    getmodel(id) {
      this.loading = true;
      this.$axios
        .post(apis.getreportpro, {
          memberID: this.$route.params.id,
          certifyType: "mobile",
          dateType: "info"
        })
        .then(res => {
          this.loading = false;
          if (res.data.isOK && res.data.data.memberInfo) {
            this.id = res.data.data.memberInfo.ID;
            this.formLabelAlign.add = res.data.data.memberInfo.Address;
            this.formLabelAlign.name = res.data.data.memberInfo.CNName;
            this.formLabelAlign.age = res.data.data.memberInfo.Age;
            this.formLabelAlign.card = res.data.data.memberInfo.CardID;
            this.formLabelAlign.zmf = res.data.data.memberInfo.ZMScore;
            this.formLabelAlign.sex = res.data.data.memberInfo.Gender;
            this.formLabelAlign.qq = res.data.data.memberInfo.QQ;
            this.formLabelAlign.tel = res.data.data.memberInfo.Tel;
            this.formLabelAlign.years = res.data.data.memberInfo.TelYears;
            this.formLabelAlign.wx = res.data.data.memberInfo.WX;
            this.zmzSfz = res.data.data.memberInfo.IDcardZ; //正面照
            this.fmzSfz = res.data.data.memberInfo.IDcardF; //反面照
            this.sczSfz = res.data.data.memberInfo.IDcardS; //手持照
            this.formLabelAlign.jj11 = res.data.data.memberInfo.EmergencyName1; //紧急一
            this.formLabelAlign.jj21 =
              res.data.data.memberInfo.EmergencyRelation1; //紧急一
            this.formLabelAlign.bz1 = res.data.data.memberInfo.EmergencyPhone1; //紧急一
            this.formLabelAlign.jj1 = res.data.data.memberInfo.EmergencyName; //紧急
            this.formLabelAlign.jj2 =
              res.data.data.memberInfo.EmergencyRelation; //紧急
            this.formLabelAlign.bz = res.data.data.memberInfo.EmergencyPhone; //紧急
          } else {
            if (res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
              this.$router.push({
                path: "/admin"
              });
            } else {
              this.$message.error(res.data.msg);
            }
          }
        })
        .catch(function(error) {
          this.loading = false;
          me.$message.error(error);
        });
    }
  }
};
</script>

<style scoped>
.psName {
  margin-top: 20px;
  background: #2a3f54;
  padding: 15px 0;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  text-indent: 20px;
  font-size: 16px;
}
.divleft {
  width: 320px;
  float: left;
}
.divleft img {
  height: 200px;
  width: 320px;
  border: 1px solid #337ab7;
}
.divrig {
  width: 322px;
  float: left;
  margin-left: 20px;
}
.thumbnail {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divrig .el-form-item {
  margin-bottom: 10px;
}
.sfz-box {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfz-box img {
  width: 320px;
  height: 200px;
  display: block;
  float: left;
  border: 1px solid #337ab7;
}
.sfz-box img:nth-of-type(1) {
  margin-right: 20px;
}
.member_box .el-dialog__body {
  padding-bottom: 10px;
}
.bigImg{
	height: 500px;
}
.bigDialog .el-dialog .el-dialog__body {
	padding: 0 10px !important;
	text-align: center;
}
</style>